<template>

        <div id="twoBox" class="drag-two-box" style="background-color: #ffffff;">
            <div id="twoleft" class="drag-two-left">
                <Left ref="jsMind" @success="this.refreshChange"/>

            </div>
            <div id="tworesize" class="drag-two-resize"></div>
            <div id="tworight" class="drag-two-right">
                <basic-container>
                <avue-crud :option="option"
                           :table-loading="loading"
                           :data="data"
                           v-model:page="page"
                           v-model:search="search"
                           :permission="permissionList"
                           :before-open="beforeOpen"
                           v-model="form"
                           ref="crud"
                           @sort-change="sortChange"
                           @search-change="searchChange"
                           @search-reset="searchReset"
                           @selection-change="selectionChange"
                           @current-change="currentChange"
                           @size-change="sizeChange"
                           @refresh-change="refreshChange"
                           @row-dblclick="dbClick"
                           @on-load="onLoad">
                    <template #search-menu="{ row, size }">
                        <div style="display: flex; padding-left: 5px;">
                            <el-button :size="size" type="primary" @click="searchChange(this.search,)">搜 索</el-button>
                            <el-button :size="size" type="default" @click="searchReset()">清 空</el-button>
                        </div>
                    </template>
                    <template #menu="{ row, size, type }">
                        <!--<el-tooltip content="查看bom数据" placement="top">-->
                        <!--<el-button icon="el-icon-view" link :size="size" :type="type" @click="() => showBomDetail(row)">-->
                        <!--</el-button>-->
                        <!--</el-tooltip>-->
                        <el-tooltip content="反审核" placement="top" v-if="row.isAssign=='是' && permission.bom_list_audit">
                            <el-button icon="NoSmoking" link :size="size" :type="type"
                                       @click="() => unAuditMaterial(row)">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip content="审核" placement="top" v-if="row.isAssign=='否' && permission.bom_list_audit">
                            <el-button icon="EditPen" link :size="size" :type="type" @click="() => auditMaterial(row)">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip content="复制" placement="top">
                            <el-button icon="DocumentCopy" link :size="size" :type="type" @click="() => copyBom(row)">
                            </el-button>
                        </el-tooltip>
                    </template>
                    <template #menu-left>
                        <div>
                            <span style="color:dimgrey; padding-left: 5px; font-size: 12px; display:flex; transform: translateY(100%);">双击可展示物料Bom清单</span>
                        </div>
                    </template>
                </avue-crud>
                </basic-container>

            </div>
        </div>

</template>

<script>
    import {
        getList,
        getDetail,
        add,
        update,
        remove,
        unAuditMaterial,
        auditMaterial
    } from "@/api/anwise/material/material";
    import {mapGetters} from "vuex";
    import Left from './bom_list_jsmind.vue';


    export default {
        components: {
            Left,
        },
        data() {
            return {
                form: {},
                query: {},
                loading: true,
                dateFormat: 'YYYY-MM-DD',
                pickerOptions: {},
                page: {
                    pageSize: 20,
                    currentPage: 1,
                    total: 0,
                    layout:'sizes,pager'
                },
                search: {},
                selectionList: [],
                option: {
                    height: 'auto',
                    calcHeight: 30,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: false,
                    selection: false,
                    labelWidth: 150,
                    indexWidth:100,
                    menuWidth: 120,
                    addBtn: false,
                    editBtn: false,
                    viewBtn: false,
                    delBtn: false,
                    searchIndex: 3,
                    searchSpan: 12,
                    stripe: true,
                    searchIcon: false,
                    searchShowBtn: true,
                    searchEnter:true,
                    searchBtn:false,
                    emptyBtn:false,
                    highlightCurrentRow: true,
                    column: [
                        {
                            label: "物料编号",
                            prop: "materialNo",
                            type: "input",
                            search: true,
                            overHidden: true,
                            sortable: true,
                            width: 120,
                            fixed: true,
                            rules: [{
                                required: true,
                                message: "请输入物料编号",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "物料名称",
                            prop: "materialName",
                            type: "input",
                            search: true,
                            overHidden: true,
                            sortable: true,
                            width: 120,
                            rules: [{
                                required: true,
                                message: "请输入物料名称",
                                trigger: "blur"
                            }],
                        },

                        {
                            label: "客户条码",
                            prop: "barCode",
                            type: "input",
                            overHidden: true,
                            sortable: true,
                            width: 120,
                        },
                        {
                            label: "颜色",
                            prop: "color",
                            type: "select",
                            dicUrl: "/blade-system/dict-biz/dictionary?code=color",
                            width: 120,
                            props: {
                                label: 'dictValue',
                                value: 'dictKey',
                            },
                            dataType: 'string',
                            rules: [{
                                required: true,
                                message: "请选择颜色",
                                trigger: "blur"
                            }],
                            overHidden: true,
                            sortable: true,
                            filterable: true,
                            width: 100,
                        }, {
                            label: "类别",
                            prop: "type",
                            type: "select",
                            filterable: true,
                            overHidden: true,
                            sortable: true,
                            dicUrl: "/blade-system/dict-biz/dictionary?code=material_s_type",
                            width: 90,
                            props: {
                                label: 'dictValue',
                                value: 'dictKey',
                            },
                            dataType: 'string',
                            rules: [{
                                required: true,
                                message: "请选择类别",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "烫金纸规格",
                            prop: "mxh",
                            type: "input",
                            overHidden: true,
                            sortable: true,
                            width: 130,
                        },
                        {
                            label: "牌仔",
                            prop: "mtz",
                            type: "input",
                            overHidden: true,
                            sortable: true,
                            width: 120,
                        },
                        {
                            label: "材质",
                            prop: "mcz",
                            type: "input",
                            overHidden: true,
                            sortable: true,
                            width: 120,
                        },
                        {
                            label: "bom审批状态",
                            prop: "isAssign",
                            type: "select",
                            dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
                            filterable: true,
                            props: {
                                label: 'dictValue',
                                value: 'dictKey',
                            },
                            value: 1,
                            dataType: 'string',
                            rules: [{
                                required: false,
                                message: "请选择是否有效",
                                trigger: "blur"
                            }],
                            searchLabelWidth: 110,
                            overHidden: true,
                            sortable: true,
                            width: 150,
                        },
                        {
                            label: "bom审批人",
                            prop: "assignName",
                            type: "input",
                            overHidden: true,
                            sortable: true,
                            width: 150,
                        },
                        {
                            label: "bom审批时间",
                            prop: "assignTime",
                            type: "input",
                            overHidden: true,
                            sortable: true,
                            width: 150,
                        },
                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    // addBtn: this.validData(this.permission.bom_list_add, false),
                    viewBtn: this.validData(this.permission.bom_list_view, false),
                    // delBtn: this.validData(this.permission.bom_list_delete, false),
                    editBtn: this.validData(this.permission.bom_list_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        mounted() {
            this.dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight");
            console.log('!!!!!!!!!!!!!!!',this.permission)
            window.$vue = this

        },
        methods: {
            showBomDetail(row) {

            },
            copyBom(row) {
                this.$refs.jsMind.$refs.bomListCopy.show("复制【"+row.materialNo+"】",row.materialNo);
            },
            auditMaterial(row) {
                this.loading = true;
                auditMaterial(row.materialNo).then(res => {
                    this.loading = false;
                    if (res.data.success) {
                        this.$message({
                            type: "success",
                            message: res.data.msg || "审核成功!"
                        });
                        this.refreshChange();
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg || "审核失败!"
                        });
                    }
                })
            },
            unAuditMaterial(row) {
                this.loading = true;
                unAuditMaterial(row.materialNo).then(res => {
                    this.loading = false;
                    if (res.data.success) {
                        this.$message({
                            type: "success",
                            message: res.data.msg || "反审核成功!"
                        });
                        this.refreshChange();
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg || "反审核失败!"
                        });
                    }
                })
            },
            handleAdd(row) {
                this.$refs.jsMind.showAdd(row);
            },

            dbClick(row) {
                console.log('333333');
                this.$refs.jsMind.handleDbClick(row)
            },
            sortChange(val) {
                console.log(val)
                this.sort = {
                    prop: val.prop,
                    order: val.order
                };
                let order = "";
                if (this.sort.prop && this.sort.order) {
                    if (this.sort.order === "descending") {
                        order = `${this.sort.prop} desc`
                    } else {
                        order = `${this.sort.prop} asc`
                    }
                }
                this.query.orderBy = order;
                this.onLoad(this.page);
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$refs.jsMind.refreshJsMind();
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            handleDelete() {
                if (this.selectionList.length === 0) {
                    this.$message.warning("请选择至少一条数据");
                    return;
                }
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(this.ids);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.$refs.crud.toggleSelection();
                    });
            },
            beforeOpen(done, type) {
                if (["edit", "view"].includes(type)) {
                    getDetail(this.form.id).then(res => {
                        this.form = res.data.data;
                    });
                }
                done();
            },
            searchReset() {
                this.query = {};
                console.log();
                this.search.createTimeSearch = '';
                this.search.materialNo = "";
                this.search.materialName = "";
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1
                this.onLoad(this.page, params);
                if (done) {
                    done();
                }

            },
            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                this.$refs.crud.toggleSelection();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            onLoad(page, params = {}) {
                this.loading = true;
                params.isBomList = 1;
                params.isActive = '是';
                console.log(params);
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    console.log(res.data)
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                    this.selectionClear();
                });
            },
            // treeLoad(tree, treeNode, resolve) {
            //     const parentId = tree.id;
            //     getTree().then(res => {
            //         console.log(res.data)
            //         resolve(res.data.data);
            //     });
            // }
            dragTwoColDiv(contentId, leftBoxId, resizeId, rightBoxId) {
                let resize = document.getElementById(resizeId);
                let leftBox = document.getElementById(leftBoxId);
                let rightBox = document.getElementById(rightBoxId);
                let box = document.getElementById(contentId);
                resize.onmousedown = function (e) {
                    let startX = e.clientX;
                    resize.left = resize.offsetLeft;
                    document.onmousemove = function (e) {
                        let endX = e.clientX;
                        let moveLen = resize.left + (endX - startX);
                        let maxT = box.clientWidth - resize.offsetWidth;
                        if (moveLen < 150) moveLen = 150;
                        if (moveLen > maxT - 150) moveLen = maxT - 150;
                        resize.style.left = moveLen;
                        leftBox.style.width = moveLen + 'px';
                        rightBox.style.width = (box.clientWidth - moveLen - 5) + 'px';
                    }
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        resize.releaseCapture && resize.releaseCapture();
                    }
                    resize.setCapture && resize.setCapture();
                    return false;
                }
            }
        }
    };

</script>

<style lang="scss" scoped>
    /*两列 */
    #twoBox {
        display: flex;
        overflow: hidden;
    }

    #twoleft {
        width: calc(70% - 10px);
    }

    #tworesize {
        width: 5px;
        cursor: w-resize;
    }

    #tworight {
        width: 30%;
    }

    /* 三列 */
    #contentId {
        display: flex;
    }

    #leftId {
        width: calc(20% - 10px);
    }

    #resizeOne {
        width: 5px;
        cursor: w-resize;
    }

    #centerId {
        width: 60%;
    }

    #resizeTwo {
        width: 5px;
        cursor: w-resize;
    }

    #rightId {
        width: 20%;
    }

    /* 两横 */
    #mainId {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    #topBoxId {
        height: calc(80% - 5px);
    }

    #resizeId {
        height: 5px;
        cursor: s-resize;
    }

    #downBoxId {
        height: 20%;
    }

    .all {
        padding: 30px;
        list-style: none;
    }

    .drag-main {
        margin-bottom: 30px;

        h2 {
            margin-bottom: 30px;
        }
    }

    .drag-two-box {
        display: flex;
        .drag-two-resize {
            width: 5px;
            cursor: w-resize;
            background: #dddee0;
        }
    }

</style>
